<template>
  <div>
    <div class="title" style="text-align:left">
      <font-awesome-icon icon="newspaper" />&nbsp;商品秒杀列表
    </div>
    <div class="block-line">&nbsp;</div>
    <el-table :data="killData" border style="width: 100%">
      <el-table-column prop="gtitle" label="商品名称" width="300"/>
      <el-table-column prop="gprice" label="商品价格" width="100"/>
      <el-table-column prop="price" label="折扣价格" width="180"/>
      <el-table-column prop="start" label="开始日期时间" width="160"/>
      <el-table-column prop="end" label="结束日期时间" width="160"/>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
           <i class="el-icon-delete"></i>&nbsp;删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block-line">&nbsp;</div>
    <div class="text-right"><el-pagination background layout="prev, pager, next" :total="totalPage"
      :current-page.sync="currentPage" @current-change="loadKillData"></el-pagination></div>
  </div>
</template>
<script>
import { Loading } from 'element-ui'
export default {
  data () {
    return {
      detailsDialogVisible: false,
      currentPage: 1,
      totalPage: 200,
      killData: []
    }
  },
  methods: {
    handleDelete (item) { // 【开发】新闻数据删除
      this.$confirm('确定要删除该秒杀信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$back.kill.remove(item.kid).then(res => { // 加载秒杀数据信息
          console.log(res.data)
        })
        this.killData.splice(item, 1)
        this.$message({
          type: 'success',
          message: '商品秒杀信息成功!'
        })
      }).catch(() => {})
    },
    loadKillData () { // 【开发】分页数据加载操作
      let loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        setTimeout(() => {
          this.$back.kill.loadKill(this.currentPage).then(res => { // 加载秒杀数据信息
            this.killData = res.data // 保存秒杀列表数据
          })
          loadingInstance.close()
        }, 100)
      })
    }
  },
  mounted () {
    this.loadKillData() // 加载用户数据信息
  }
}
</script>
